::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

::view-transition-old(setup-card),
::view-transition-new(setup-card) {
    height: 100%;
    right: 0;
    left: auto;
    -webkit-font-smoothing: antialiased;
    will-change: transform, opacity;
}

::view-transition-old(setup-card) {
    animation: slide-out-left 0.4s ease-in;
}

::view-transition-new(setup-card) {
    animation: slide-in-right 0.4s ease-out;
}

::view-transition-old(setup-header),
::view-transition-new(setup-header) {
    -webkit-font-smoothing: antialiased;
    will-change: opacity;
}

::view-transition-old(setup-header) {
    animation: fade-out 0.4s ease-in;
}

::view-transition-new(setup-header) {
    animation: fade-in 0.4s ease-out;
}

::view-transition-old(primary-button),
::view-transition-new(primary-button) {
    -webkit-font-smoothing: antialiased;
    will-change: transform, opacity;
}

::view-transition-old(primary-button) {
    animation: slide-out-down 0.4s ease-in;
}

::view-transition-new(primary-button) {
    animation: slide-in-up 0.4s ease-out;
}

@keyframes slide-out-left {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slide-out-down {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(30px);
        opacity: 0;
    }
}

@keyframes slide-in-up {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


@supports not (view-transition-name: none) {

    .setup-card-transition {
        transition: all 0.4s ease-out;
    }

    .setup-header-transition {
        transition: all 0.4s ease-out;
    }

    .primary-button-transition {
        transition: all 0.4s ease-out;
    }
}

[style*="view-transition-name"] {
    will-change: transform, opacity;
    transform: translateZ(0);
}

@media (min-resolution: 120dpi) {

    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-timing-function: ease-out;
    }
}